﻿<html>
<head>
    <title id='Description'>Solar System Settings</title>
    <link rel="stylesheet" href="./Content/solar.css" type="text/css" />
    <script type="text/javascript" src="./scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">

        function getSettings() {
            $.ajax({
                url: "/settings",
                dataType: 'json',
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                success: function (response) {
                    $('#NetBiosName').val(response.NetBiosName);
                    $('#DeviceIp').val(response.DeviceIp);
                    $('#GatewayIp').val(response.GatewayIp);
                    $('#SubnetMask').val(response.SubnetMask);
                    $('#DHCPEnabled').prop('checked', response.DHCPEnabled);
                    $('div#stateText').text(response.NetduinoDate);
                    $('#chargecontroller').val(response.ChargeController);
                    $('#ModbusIpAddress').val(response.ModbusIpAddress);
                    $('#ModbusPort').val(response.ModbusPort);
                    $('#inverter').val(response.Inverter);
                    $('#lcd').prop('checked', response.LcdEnabled);
                    $('#maxPVVoltage').val(response.MaxPVVoltage);
                    $('#powerScale').val(response.PowerScale);
                    $('#batteryVoltageScale').val(response.BatteryVoltageScale);
                    setmodbus();
                    setdhcp();
                },
                error: function () {
                    alert("error");
                }
            });
        };


        function ApplySettings() {
            $.ajax({
                url: "/settings",
                dataType: 'json',
                data: {
                    DeviceIp: $('#DeviceIp').val(),
                    SubnetMask: $('#SubnetMask').val(),
                    GatewayIp: $('#GatewayIp').val(),
                    NetBiosName: $('#NetBiosName').val(),
                    DHCPEnabled: $('#DHCPEnabled').is(':checked'),
                    ModbusIpAddress: $('#ModbusIpAddress').val(),
                    ModbusPort: $('#ModbusPort').val(),
                    chargecontroller: $('#chargecontroller').val(),
                    inverter: $('#inverter').val(),
                    lcd: $('#lcd').is(':checked'),
                    maxPVVoltage: $('#maxPVVoltage').val(),
                    powerScale: $('#powerScale').val(),
                    batteryVoltageScale: $('#batteryVoltageScale').val()
                },
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (response) {
                    alert("done");
                }
            });
        };

        function maskInput() {
            var key_code = window.event.keyCode;
            var oElement = window.event.srcElement;
            if (!window.event.shiftKey && !window.event.ctrlKey && !window.event.altKey) {
                if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {
                    oElement.value = oElement.value;
                } else if (key_code == 8) {
                    oElement.value = oElement.value;
                } else {
                    event.returnValue = false;
                }
            }
            else {
                window.event.preventDefault();
            }
        }

        function setmodbus() {
            if ($('#chargecontroller').val() == "Outback") {
                $("#classic").hide();
            } else {
                $("#classic").show();
            }
        }

        function setdhcp() {
            if (document.getElementById("DHCPEnabled").checked) {
                $("#staticIP").hide();
            } else {
                $("#staticIP").show();
            }
        }

        function maskInputDot() {
            var key_code = window.event.keyCode;
            var oElement = window.event.srcElement;
            if (!window.event.shiftKey && !window.event.ctrlKey && !window.event.altKey) {
                if (((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) || key_code == 190 || key_code == 110) {
                    oElement.value = oElement.value;
                } else if (key_code == 8) {
                    oElement.value = oElement.value;
                } else {
                    event.returnValue = false;
                }
            }
            else {
                window.event.preventDefault();
            }
        }

        $(document).ready(function () {
            getSettings();
        });

    </script>
</head>
<body>
    <div id="container" style="width: 1000px">
        <div id="header" style="background-color: #FFA500;">
            <h1 style="margin-bottom: 0; color: #000080; text-align: center">
                Settings
            </h1>
        </div>
        <div class="configEntry">
            <fieldset class="section">
                <legend class="sectionLegend">Network</legend>
                <div class="sectionEntry">
                    <div class="col1">
                        Netbios Name:
                        <input id="NetBiosName" type="text" maxlength="16" size="20" />
                        <div class="col2">
                            <input type="checkbox" id="DHCPEnabled" value="true" onchange="setdhcp()">
                            DHCP Enabled
                        </div>
                    </div>
                    <div id="staticIP">
                        <div id="IPAddress" class="col1">
                            Static IP address:
                            <input id="DeviceIp" type="text" maxlength="15" size="12" onkeydown="javascript:maskInputDot();" />
                            Subnet Mask:
                            <input id="SubnetMask" type="text" maxlength="15" size="12" onkeydown="javascript:maskInputDot();" />
                            Default Gateway:
                            <input id="GatewayIp" type="text" maxlength="15" size="12" onkeydown="javascript:maskInputDot();" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="configEntry">
            <fieldset class="section">
                <legend class="sectionLegend">Charge Controller</legend>
                <div class="sectionEntry">
                    <select id="chargecontroller" onchange="setmodbus()">
                        <option value='Classic'>Midnite Solar Classic</option>
                        <option value='Outback'>Outback FlexMax</option>
                        <option value='TriStarTCP'>TriStarTCP (MPPT-60)</option>
                        <option value='TriStarRTU'>TriStarTCP (MPPT-45)</option>
                    </select>
                    <div id="classic" class="col2">
                        <div id="Div1" class="col2">
                            Modbus slave IP address:
                            <input id="ModbusIpAddress" type="text" maxlength="15" size="12" onkeydown="javascript:maskInputDot();" />
                            Port:
                            <input id="ModbusPort" type="text" maxlength="5" size="3" onkeydown="javascript:maskInput();" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="configEntry">
            <fieldset class="section">
                <legend class="sectionLegend">Inverter</legend>
                <div class="sectionEntry">
                    <select id="inverter">
                        "<option value='None'>No connection to inverter</option>
                        <option value='Outback'>Outback FX</option>
                        "
                    </select>
                </div>
            </fieldset>
        </div>
        <div class="configEntry">
            <fieldset class="section">
                <legend class="sectionLegend">Gauge Scale</legend>
                <div class="sectionEntry">
                    PV Voltage:
                    <select id="maxPVVoltage">
                        "<option value='50'>50 Volts</option>
                        <option value='100'>100 Volts</option>
                        <option value='150'>150 Volts</option>
                        <option value='200'>200 Volts</option>
                        <option value='250'>250 Volts</option>
                        "
                    </select>
                </div>
                <div class="sectionEntry">
                    Battery Voltage:
                    <select id="batteryVoltageScale">
                        "<option value='20'>20 Volts</option>
                        <option value='40'>40 Volts</option>
                        <option value='60'>60 Volts</option>
                        <option value='80'>80 Volts</option>
                        <option value='100'>100 Volts</option>
                        <option value='150'>150 Volts</option>
                        "
                    </select>
                </div>
                <div class="sectionEntry">
                    Power:
                    <select id="powerScale">
                        "<option value='1'>1 kW</option>
                        <option value='2'>2 kW</option>
                        <option value='3'>3 kW</option>
                        <option value='4'>4 kW</option>
                        <option value='5'>5 kW</option>
                        "
                    </select>
                </div>
            </fieldset>
        </div>
        <div class="configEntry">
            <input type="checkbox" id="lcd" value="true">LCD Display enabled
        </div>
        <div class="configEntry">
            <button type="button" onclick="ApplySettings()">
                Apply</button>
        </div>
        <div id="footer" class="footer">
            <div id="stateText" class="footerText">
                ----------------
            </div>
        </div>
    </div>
</body>
</html>
